<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in quyuList" :key="index" :label="item.name" :name="item.name" >
        <div class="filter-container">
          <el-button v-waves class="filter-item right-btns" type="success" @click="importShouqianba()"><svg-icon icon-class="add"/> 导入</el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="listQuery.list"
          :border="true"
          :row-class-name="tableRowClassName"
          :row-style="{height:'10px'}"
          fit
          height="770"
          highlight-current-row
          style="width: 100%;font-size: 15px"
          @selection-change="handleSelectionChange">
          <el-table-column :label="'编号'" align="left" min-width="90px" prop="bianhao" />
          <el-table-column :label="'店铺名称'" align="left" min-width="190px" prop="mendianName" />
          <el-table-column :label="'应收现金'" align="left" min-width="70px" prop="yingshouxianjin" />
          <el-table-column :label="'实收现金'" align="left" min-width="70px">
            <template slot-scope="scope">
              <el-button v-if="!scope.row.shishouxianjin" size="small" type="text" @click="setVal(scope.row)">编辑</el-button>
              <span v-if="scope.row.shishouxianjin" @click="setVal(scope.row)"> {{ scope.row.shishouxianjin }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="'收钱吧'" align="left" min-width="70px" prop="shouqianba" />
          <el-table-column :label="'其他收款'" align="left" min-width="80px">
            <template slot-scope="scope">
              <el-button v-if="!scope.row.qitashoukuan" size="small" type="text" @click="setQitashoukuan(scope.row)">编辑</el-button>
              <span v-if="scope.row.qitashoukuan" @click="setQitashoukuan(scope.row)"> {{ scope.row.qitashoukuan }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="'昨日系统合计'" align="left" min-width="70px" prop="zuorixitongheji" />
          <el-table-column :label="'收款误差'" align="left" min-width="70px" prop="shoukuanwucha" />
          <el-table-column :label="'配件毛利 '" align="left" min-width="70px" prop="peijianmaoliheji" />
          <el-table-column :label="'昨日总毛利'" align="left" min-width="70px" prop="zuorizongmaoli" />
          <el-table-column :label="'7天平均毛利'" align="left" min-width="70px" prop="qitianpingjunmaoli" />
          <el-table-column :label="'上月毛利'" align="left" min-width="80px" prop="shangyuexiaoshou" />
          <el-table-column :label="'本月毛利预计'" align="left" min-width="80px" prop="benyuemaoliyuji" />
          <el-table-column :label="'本月预计毛利提高'" align="left" min-width="80px" prop="benyueyujimaolitigao" />
          <el-table-column :label="'去年同期配件零售额'" align="left" min-width="80px" prop="quniantongqipeijianlingshoue" />
          <el-table-column :label="'上月配件零售额'" align="left" min-width="80px" prop="shangyuepeijianlingshoue" />
          <el-table-column :label="'本月配件预计零售额'" align="left" min-width="80px" prop="benyueyujipeijianlingshoue" />
          <el-table-column :label="'本月预计配件提高'" align="left" min-width="80px" prop="benyueyujipeijiantigao" />
          <el-table-column :label="'三个月配件平均销售额'" align="left" min-width="80px" prop="sangeyuepeijianpingjunxiaoshoue" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <import-dialog ref="importDialogRef" @import-success="getList"/>
  </div>
</template>
<style>
  .el-table .boss-row {
    background: #e6ff01;
  }
  .el-table .erro-row {
    background: #ff0101;
  }
</style>
<script>
import { getquyuListNoPage } from '@/api/systemManage/quyu'
import { getDetailPages, setDetailShishouXianjin, setDetailQitaShoukuan } from '@/api/systemManage/meiri'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import DelBoxMixin from '@/mixins/delBox'
import importDialog from './importDialog'
import { mapGetters } from 'vuex'

export default {
  name: 'StoreManage',
  components: { Pagination, importDialog },
  directives: { waves },
  mixins: [DelBoxMixin],

  props: {
    options: {
      type: Object,
      default: function() { return {} }
    }
  },

  data() {
    return {
      listLoading: true,
      masterId: this.$route.params.id,
      quyuList: [],
      activeName: '',
      listQuery: {}
    }
  },
  computed: {
    ...mapGetters([
      'lang'
    ])
  },
  created() {
    this.tableReset()
  },
  methods: {
    importShouqianba() {
      this.$refs.importDialogRef.init(this.masterId)
    },
    tableRowClassName({ row }) {
      if (row.id == null) {
        return 'boss-row'
      }
      if (row.shoukuanwucha !== null && row.shoukuanwucha !== 0) {
        return 'erro-row'
      }
      return ''
    },
    setVal(row) {
      this.$prompt('请输入数量', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
        inputErrorMessage: '输入数量不正确'
      }).then(({ value }) => {
        setDetailShishouXianjin({ detailId: row.id, value: value }).then(response => {
          this.tableReset()
          this.listLoading = false
        }).catch(e => {
          this.listLoading = false
          this.$message.error(e.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    setQitashoukuan(row) {
      this.$prompt('请输入其他收款信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        setDetailQitaShoukuan({ detailId: row.id, value: value }).then(response => {
          this.tableReset()
          this.listLoading = false
        }).catch(e => {
          this.listLoading = false
          this.$message.error(e.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    tableReset() {
      this.listQuery = {
        page: 1,
        rows: 10,
        total: 0,
        list: null
      }
      this.getQuyu()
    },
    getQuyu() {
      getquyuListNoPage().then(response => {
        this.quyuList = response.data.list
        this.activeName = this.quyuList[0].name
        this.getList(this.quyuList[0].id)
      })
    },
    handleClick(tab, event) {
      this.getList(this.quyuList[tab.index].id)
    },
    getList(id) {
      console.log(this.masterId)
      this.listLoading = true
      const params = Object.assign({}, this.listQuery)
      delete params.total
      delete params.list

      getDetailPages({ quyuId: id, masterId: this.masterId }).then(response => {
        this.listQuery.list = response.data.list
        this.listQuery.total = response.data.total
        this.listLoading = false
      }).catch(e => {
        this.listLoading = false
        this.$message.error(e.message)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
    },
    handleSelectionChange(val) {
      this.selectionedList = val
    }
  }
}
</script>
